<template>
  <div class="row">
    <div class="col mywx">
      <span>*</span>
      <span>绑定微信</span>
      <a
        type="button"
        v-if="!getuser.openid"
        :href="`/wechat/pc/login?uid=${getuser.userid}`"
        class="f2"
      >点击绑定</a>
      <span type="button" v-else class="f2" @click="delwxopid">解除绑定</span>
      <div class="card pos">
        <img
          class="card-img-top"
          src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/logo/%E5%85%AC%E4%BC%97%E5%8F%B7logo.gif"
          alt="Card image cap"
        >
        微信公众号

      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { asyncdelwxopid } from "../../../plugins/api.js";
export default {
  name: "mywx",
  computed: mapGetters(["getuser"]),
  props: [],
  methods: {
    async delwxopid() {
      try {
        await asyncdelwxopid();
        this.$store.dispatch("session");
        this.$message("解除成功");
      } catch (err) {
        this.$message.error("解除失败");
      }
    }
  }
};
</script>
<style scoped>
.f2 {
  width: 162px;
  height: 23px;
  background-color: #2f81f1;
  border-radius: 2px;
  color: #ffffff;
  text-align: center;
  display: inline-block;
  margin-left: 30px;
}

.mywx {
  min-height: 600px;
}
.pos {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70px;
  border-color: #ffffff;
  font-size: 12px;
  text-align: center;
}
</style>

